
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<style>
    body::-webkit-scrollbar {
        display: none;
    }
</style>
<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
    <div th:replace="header::common_resource"></div>
</head>
<body>
<div class="demoTable layui-form layui-row" style="margin-top: 7px">
    名字：
    <div class="layui-inline">
        <input class="layui-input" name="name" id="nameId" autocomplete="off">
    </div>
    角色：
    <div class="layui-inline">
        <select name="role" id="role_id">
            <option value="">全部角色</option>
            <option value="1">普通用户</option>
            <option value="0">管理员</option>
        </select>
    </div>
    已逻辑删除：
    <div class="layui-inline">
        <select name="deleted" id="deleted_id">
            <option value="">不限</option>
            <option value="1">否</option>
            <option value="0">是</option>
        </select>
    </div>
    <button class="layui-btn" data-type="reload">搜索</button>
</div>

    <table class="layui-hide" id="test" lay-filter="test"></table>


    <script type="text/html" id="barDemo">

        {{#     if(d.username=="admin") {            }}
        <a class="layui-btn  layui-btn-xs" >无法更改</a>
        {{#     } else{                           }}

        {{#         if(d.role==1){                    }}
        <a class="layui-btn layui-btn-xs layui-btn-xs" lay-event="setManager">设置管理员</a>
        {{#         }else{                    }}
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="cancelManager">取消管理员</a>
        {{#         }                    }}

        {{#     }                          }}
    </script>

    <script type="text/html" id="statusTemplet">
        <input type="checkbox" name="{{d.username}}" value="{{d.id}}"  lay-skin="switch" lay-text="激活|禁用" lay-filter="statusLayFilter" {{ d.status == 1 ? 'checked' : '' }}>
    </script>
    <script type="text/html" id="roleTemplet">
        {{#     if(d.role==1) {            }}
        <span class="layui-badge layui-bg-blue" style="position: relative; ">普通用户</span>
        {{#     } else{     }}
        <span class="layui-badge layui-bg-orange" style="position: relative; ">管理员</span>
        {{#     }                          }}
    </script>

    <script th:inline="javascript">
        layui.use('table', function(){
            var table = layui.table;
            var form = layui.form;

            table.render({
                elem: '#test'
                ,url:[[${#request.getContextPath()}]]+'/user/selectAll'
                ,defaultToolbar: ['filter', 'exports', 'print']
                ,title: '用户数据表'
                ,cols: [
                    [
                    {field:'id', title:'ID', fixed: 'left'}
                    ,{field:'username', title:'用户名'}
                    ,{field:'password', title:'密码'}
                    ,{field:'role', title:'角色',templet: '#roleTemplet'}
                    ,{field:'status', title:'状态',templet: '#statusTemplet'}
                    // ,{field:'email', title:'邮箱'}
                    // ,{field:'phone', title:'手机号'}
                    // ,{field:'question', title:'问题'}
                    // ,{field:'answer', title:'答案'}
                    ,{field:'gmtCreate', title:'创建时间',templet: "<div>{{layui.util.toDateString(d.gmtCreate, 'yyyy-MM-dd HH:mm:ss')}}</div>"}
                    ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:200}
                    ]
                ]
                ,page: true
                ,id: 'tableId'
            });

            //监听状态切换操作
            form.on('switch(statusLayFilter)', function(obj){
                var status = obj.elem.checked == true ? 1 : 0;
                if(this.name=='admin'){
                    obj.elem.checked=true;
                    mylayer.errorMsg("无权限更改超级管理员的状态");
                    layui.form.render('checkbox');
                    return;
                }
                $.post(
                    [[${#request.getContextPath()}]]+'/user/updateSelective',
                    {'id': this.value,'status':status},
                    function(result) {
                        if (result.code == 0) {
                            mylayer.okMsg(result.msg);
                        }else {
                            mylayer.errorMsg(result.msg);
                        }
                    },
                    'json'
                );
            });


            //监听行工具事件
            table.on('tool(test)', function(obj){
                //{id: 2, name: 'zhansgan', password: '23', age: 0, gender: null}
                var data = obj.data;
                //console.log(obj)
                if(obj.event === 'setManager'){
                    layer.confirm('确定设置为管理员?', function(index){
                       $.post(
                           [[${#request.getContextPath()}]]+'/user/updateSelective',
                           {'id': data.id,'role':0},
                           function(result) {
                               if (result.code == 0) {
                                   mylayer.okMsg(result.msg);
                                   //删除之后重新刷新这个表格
                                   table.reload('tableId');
                               }else{
                                   mylayer.okMsg(result.msg);
                               }
                           },
                           'json'
                       );
                    });
                }else if(obj.event==='cancelManager'){
                    $.post(
                        [[${#request.getContextPath()}]]+'/user/updateSelective',
                        {'id': data.id,'role':1},
                        function(result) {
                            if (result.code == 0) {
                                mylayer.okMsg(result.msg);
                                //删除之后重新刷新这个表格
                                table.reload('tableId');
                            }else{
                                mylayer.okMsg(result.msg);
                            }
                        },
                        'json'
                    );
                }
            });

            var $ = layui.$, active = {
                reload: function(){
                    //执行重载
                    table.reload('tableId', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        ,where: {
                            // /user?method=selectByPage&page=1&limit=10&name=zhasang&gender=男
                            name: $('#nameId').val(),
                            role: $('#role_id').val(),
                            deleted: $('#deleted_id').val(),
                        }
                    });
                }
            };

            $('.demoTable .layui-btn').on('click', function(){
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });

        });
    </script>
</body>
</html>
